<template>
    <s-layout id="layout" :title="'新增邮寄合同'" navbar="normal" leftIconColor="#ffffff" :autoBack="true" :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#ffffff', fontSize: '32rpx',fontWeight:'600' }">
        <!-- 最大盒子 -->
        <view class="container" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
            <view class="area form_box">
                <scroll-view scroll-y :enable-back-to-top="true">
                    <u--form labelPosition="left" :model="FormData" :rules="rules" ref="formRole" :borderBottom="false">
                        <!-- 项目 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="部门：" prop="department_id" ref="department_id">
                            <u--input @tap="projectSwitch" disabled :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="text" placeholder="请选择部门" v-model="project_title" border="none"></u--input>
                        </u-form-item>

                        <!-- 公司名称 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="公司名称：" prop="company_name" ref="company_name">
                            <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="text" placeholder="请输入公司名称" v-model="FormData.company_name" border="none"></u--input>
                        </u-form-item>

                        <!-- 邮寄城市 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="邮寄城市：" prop="mail_city" ref="mail_city">
                            <u--input @tap="selectCity" disabled :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="text" placeholder="请选择邮寄城市" v-model="FormData.mail_city" border="none"></u--input>
                        </u-form-item>

                        <!-- 合作业务 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="合作业务：" prop="business" ref="business">
                            <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="text" placeholder="请输入合作业务" v-model="FormData.business" border="none"></u--input>
                        </u-form-item>

                        <!-- 详细地址 -->
                        <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="详细地址：" prop="address" ref="address">
                        </u-form-item>
                        <view class="textarea_box">
                            <up-textarea :maxlength="200"  height="80" v-model="FormData.address" placeholder="请输入详细地址" ></up-textarea>
                        </view>
                        
                    </u--form>
                </scroll-view>
            </view>
        </view>

    </s-layout>

    <!-- 底部保存按钮 -->
    <view>
        <s-button @netWork="submitForm" :text="'提交'" />
    </view>
    <!-- 选择城市 && 弹出 -->
    <up-picker :show="mail_city_show" :closeOnClickOverlay="true" ref="mail_city_Ref" :columns="mail_city_columns" @close="mail_city_close" @confirm="mail_city_confirm" @change="mail_city_changeHandler" @cancel="mail_city_cancel"></up-picker>
    <!-- 底部弹出组件 && 项目弹出 -->
    <!-- <s-popup-list @selectedData="project_switchTitle" :current_page="project_current_page"
        :last_page="project_last_page" @subcomponentSearch="project_subcomponentSearch" @pageEvent="project_pageEvent"
        :arrayList="projectDataList" ref="project_popupListRef" :popupTitle="'选择项目'" :listingName="'项目信息列表'"
        :showGoLink="'#'">
    </s-popup-list> -->
    <!-- 底部弹出组件 && 部门弹出 -->
    <s-project-class @selectedData="project_switchTitle" 
    :arrayList="projectDataList" ref="project_popupListRef"
    :searchBoxIsShow="false"   :showGoLink="'#'"></s-project-class>
</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
    import { isEmpty } from '@/sheep/helper/utils.js'
    import { province,city } from '../evection/city.js'
    const { safeAreaInsets } = uni.getSystemInfoSync()
    onLoad(() => {
        let params={
            is_all:'0',
            is_include_main:'1'
        }
        projectList(params)           // 获取项目列表
    })
        // 表单数据
    const FormData = reactive({
        department_id:'',              // 项目ID
        company_name:'',            // 公司名称
        mail_city:'',               // 邮寄城市
        business:'',                // 合作业务
        address:'',                 // 详细地址
    })

    // 表单校验
    const rules = {
        department_id:[
            {
                required:true,
                message:'请选择部门',
            },
        ],
        company_name:[
            {
                required:true,
                message:'请输入公司名称',
            },
        ],
        mail_city:[
            {
                required:true,
                message:'请选择邮寄城市',
            },
        ],
        business:[
            {
                required:true,
                message:'请输入合作业务',
            },
        ],
        address:[
            {
                required:true,
                message:'请输入详细地址',
            },
        ]
    }

    // 选择城市
    const mail_city_Ref = ref(null)
    const mail_city_show = ref(false)
    const mail_city_columns = ref([province,city[0]]);
    const mail_city_columnData = ref(city)
        // 弹出
    const selectCity = () => {
        mail_city_show.value = true
    }
        // 关闭
    const mail_city_close = () => {
        mail_city_show.value = false
    }
        // 确定
    const mail_city_confirm = (e) => {
        FormData.mail_city = `${e.value[0]}-${e.value[1]}`
        mail_city_close()
    };
        // 取消
    const mail_city_cancel = () => {
        mail_city_close()
    }
        // 根据一级联动切换二级联动
    const mail_city_changeHandler = (e) => {
        const { columnIndex, value, values, index } = e;
        if (columnIndex === 0) {
            mail_city_Ref.value.setColumnValues(1, mail_city_columnData.value[index]);
        }
    };

    // 选择项目
    //获取项目列表
    const projectDataList = ref([])
 
    const project_title = ref('')
    const project_popupListRef = ref(null)
    const project_keywords = ref()
    // 点击弹出
    const projectSwitch = () => {
        project_popupListRef.value.open()
    }
    // 封装项目列表接口
    const projectList = async (params = null) => {
        const res = await sheep.$api.app.getDepartment(params);
        projectDataList.value = res.data;
     
    };
 
   
    // 拿过来的项目数据
    const project_switchTitle = (item) => {
        project_title.value = item.jointTitles
        FormData.department_id = item.id
    }

    const formRole = ref(null)
    // 表单提交
    const submitForm = () => {
        formRole.value.validate().then(async (res)=> {
            const resust = await sheep.$api.contract_traceability.contract_traceabilityAddAPI(FormData);
            if(resust.code == 1) {
                setTimeout(() => {
                    sheep.$router.back(true)
                },1000)
            } else {
                setTimeout(()=> {
                    sheep.$helper.toast(res.msg);
                    // uni.showToast({
                    //     title:res.msg,
                    //     icon:'none'
                    // })
                },1000)
            }
        }).catch((err) => {})
    }

</script>

<style lang="scss" scoped>

    :deep(.u-form-item__body){
        height: 80rpx;
        margin-bottom:10rpx;
    }


    :deep(.u-form-item) {
        &:not(:nth-last-child(2)) {
            .u-form-item__body {
                background-color: #F9FAFF !important;
            }
        }
    }

    :deep(.u-textarea.data-v-31706dd7) {
        background-color: #F9FAFF;
        padding: 0;
        margin-bottom:10rpx;
    }

    // uview 内部样式 表单验证 警告文字距离
    :deep(.u-form-item__body__right__message.data-v-b4fd400b) {
        margin-left: 0 !important;
    }

    // uview 内部样式 up-textarea 文字距离
    :deep(.u-textarea__field) {
        background-color: #F9FAFF !important;
        margin-top: 30rpx;
        margin-left: 30rpx;
    }

    // uview 内部样式 输入内容右边间距
    :deep(.u-input__content__field-wrapper__field.data-v-5904192e) {
        margin-right: 20rpx;
    }

    // uview 内部样式 label左边间距
    :deep(.u-form-item__body__left.data-v-b4fd400b) {
        margin-left: 20rpx;
    }

    // uview 内部样式 label字体粗细
    :deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
        font-weight: $uni-font-weight;
    }

    // 最大盒子
    .container {
        width: 100%;
        background-size: cover; /* 或 contain */
    }
    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    // 表单盒子
    .form_box {
        width: calc(100% - 100rpx);
        padding: 60rpx 30rpx;
        margin-top: 20rpx;
        border-radius: 16rpx;
        background-color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    }
    // 备注
    .remark {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 30rpx;
        font-style: normal;
        text-decoration: none;
    }
</style>


